{{extend layout}}

{{block 'css'}}
<link rel="stylesheet" type="text/css" href="{{pluResPath}}/hero/list.css" />
{{/block}}


{{block 'main'}}

<div class="head-box">
    <div class="title">角色列表 <span class="label">共{{num}}个角色</span> </div>
</div>
<div class="nav-box">
    <div class="item">发送 <mark>{{rulePrefix}}寒悠悠图鉴</mark> 查看角色图鉴 </div>
    <div class="item">发送 <mark>{{rulePrefix}}寒悠悠图片列表</mark> 查看角色图片 </div>
    {{include from}}
</div>
<div class="main-box hero-list">
    {{each heros hero idx}}
    <div class="hero-item hero-{{hero.rarity?.id||3}}">
        <div class="hero-img">
            <img src="{{pluResPath}}/UI/{{hero.avatarTexture?.[3]}}"
                onerror="this.onerror=null; this.src='{{pluResPath}}/UI/tex_icon_hero_m_default.png';this.style='width:115px;left:-10px;bottom:-10px;transform: translateX(0%);'">
        </div>
        {{if hero.position}}
        <img class="hero-career" src="{{pluResPath}}/UI/{{hero.position?.icon[0]}}"
            style="background-color:{{hero.element?.elementColor}}; width: 35px;border-radius: 10px;padding: 1px;">
        {{/if}}
        <div class="hero-rarity">
            <img src="{{pluResPath}}/icon/rarity/rarity-{{hero.rarity?.id||3}}.png">
        </div>
        <div class="hero-text ">{{hero.name}}</div>
    </div>
    {{/each}}
</div>

{{/block}}